import React from 'react';
import {Button} from 'antd';
import {useDrag} from "react-dnd";
export default function LeftMain(props){
    // 一个div布局子组件的内容
    const divJson = {
        type:{
            "name":"div"
        },// 用于鉴别组件类型,div,img,span,柱状图，饼状图，等等。。。。
        children:[],
        id:'div_'+new Date().getTime(),// 组件id
        position:{left:0,top:0},
        props:{
            style:{
                position:'absolute',
                width:'200px',
                height:'200px',
                border:'1px solid #000000'
            },// 组件style，常规样式，宽高，背景色等等
            className:'',// 组件的className
            divComponentData:'',
            bgpic:''
        }
    };
    // 普通表格初始化内容
    const chartOption = {
        animation: false,
        title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
        },
        tooltip: {
            show: true,
            confine: false, //是否将 tooltip 框限制在图表的区域内
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color : [ "#0091f4", "#5dd5a5", "#eac616", "#e98c51", "green" ],
        legend: {
            selectedMode: false,//取消图例上的点击事件
            show : true,
            orient: 'vertical',
            left: 'left',
            itemWidth : 20,
            itemHeight : 15,
            itemGap : 10,
            textStyle : {
                color : '#333333'
            },
        },
        grid : {
            x : '0%',
            y : '15%',
            x2 : '0%',
            y2 : '5%'
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '50%',
                center : [ '50%', '50%' ],  //饼图的中心（圆心）坐标
                minAngle : 5,   //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                avoidLabelOverlap : true,   //是否启用防止标签重叠策略，默认开启
                data: [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'}
                ],
                //label:饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                label : {
                    normal : {
                        show : false,
                        position : 'outside'
                    },
                    emphasis : {
                        show : true,
                        formatter : "{b}\n{d}%",
                        textStyle : {
                            fontSize : '15',
                            fontWeight : 'bold',
                        }
                    }
                },
                //labelLine：标签的视觉引导线配置。在 label 位置 设置为'outside'的时候会显示视觉引导线
                labelLine : {
                    normal : {
                        show : true
                    }
                },
                //emphasis:高亮状态配置
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 表格初始化内容
    const chartsJson = {
        type:{
            "name":"normalcharts"
        },// 用于鉴别组件类型,div,img,span,柱状图，饼状图，等等。。。。
        children:[],
        id:'chart_'+new Date().getTime(),// 组件id
        position:{left:0,top:0},
        props:{
            style:{
                position:'relative',
                width:'300px',
                height:'300px'
            },// 组件style，常规样式，宽高，背景色等等
            options:chartOption,
            className:'',// 组件的className
            bgpic:''
        }
    };
    // 自定义组件内容
    const reactEditor = {
        type:{
            "name":"div"
        },// 用于鉴别组件类型,div,img,span,柱状图，饼状图，等等。。。。
        children:[],
        id:'reactEditor_'+new Date().getTime(),// 组件id
        position:{left:0,top:0},
        props:{
            style:{
                position:'relative',
                width:'100px',
                height:'100px',
                border:'1px solid #000000'
            },// 组件style，常规样式，宽高，背景色等等
            className:'',// 组件的className
            divComponentData:'',
            bgpic:''
        }
    };

    const defaultJson = {
        'div':divJson,
        'normalcharts':chartsJson,
        'reacteditor':reactEditor,
        'mapcharts':chartsJson
    }

    const {text,defaultConfig} = props;

    let resultJson = defaultJson[text];

    const [,dragref] = useDrag({
        item: {
            type: 'box',
            dragItem: resultJson
        },
        end: (item, monitor) => {
            const dropResult = monitor.getDropResult();
            if (item && dropResult) {
                // alert(`You dropped into ${dropResult.name}!`);
            }
        },
        collect: monitor => ({
            isDragging: monitor.isDragging(),
        }),
    });
    return (
        <div ref={dragref} style={{width:'50px',height:'50px',border:'1px solid #000'}}>{text}</div>);
}